<!-- 个人中心：支持装修 -->
<template>
  <s-layout
    title="我的"
    tabbar="/pages/index/user"
    navbar="custom"
    :bgStyle="template.page"
    :navbarStyle="template.navigationBar"
    onShareAppMessage
  >
    <s-block
      v-for="(item, index) in template.components"
      :key="index"
      :styles="item.property.style"
    >
      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
    </s-block>

    <!-- 我的预约按钮 -->
    <view class="my-booking-section ss-m-20">
      <view class="booking-card" @tap="goToBookingList">
        <view class="booking-header ss-flex ss-col-center ss-row-between">
          <view class="booking-left ss-flex ss-col-center">
            <view class="booking-icon">
              <text class="sicon-calendar"></text>
            </view>
            <view class="booking-info ss-m-l-20">
              <view class="booking-title">我的预约</view>
              <view class="booking-desc">查看预约记录和状态</view>
            </view>
          </view>
          <view class="booking-arrow">
            <text class="cicon-forward"></text>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed } from 'vue';
  import { onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  });

  const template = computed(() => sheep.$store('app').template.user);

  // 跳转到我的预约页面
  const goToBookingList = () => {
    sheep.$router.go('/pages/user/booking-list');
  };

  onShow(() => {
    sheep.$store('user').updateUserData();
  });

  onPullDownRefresh(() => {
    sheep.$store('user').updateUserData();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
.my-booking-section {
  .booking-card {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 1rpx 8rpx rgba(0, 0, 0, 0.12);
    }
  }

  .booking-header {
    .booking-left {
      flex: 1;

      .booking-icon {
        width: 80rpx;
        height: 80rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .sicon-calendar {
          font-size: 36rpx;
          color: #ffffff;
        }
      }

      .booking-info {
        .booking-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333333;
          margin-bottom: 8rpx;
        }

        .booking-desc {
          font-size: 26rpx;
          color: #999999;
        }
      }
    }

    .booking-arrow {
      .cicon-forward {
        font-size: 32rpx;
        color: #cccccc;
      }
    }
  }
}
</style>
